<template>
  <div id="checkin_bg">
    <box class="go-btn-box">
      <x-button class="go-btn" @click.native="start" :disabled="btn.disabled">
        {{btn.text}}
      </x-button>
    </box>
    <div v-transfer-dom>
      <loading :show="loadingShow" text="签到中"></loading>
    </div>
  </div>
</template>

<script>
  import {XButton, Box, Loading, TransferDomDirective as TransferDom} from 'vux'

  export default {
    directives: {
      TransferDom
    },
    components: {
      XButton,
      Box,
      Loading
    },
    data() {
      return {
        btn: {
          disabled: false,
          text: '签到'
        },
        loadingShow: false
      }
    },
    mounted: function () {

    },
    methods: {
      start() {
        this.loadingShow = true
        // 获取签到者列表
        this.$http.get('/api/sign/user/1').then(response => {
          console.log(response)
          this.btn.disabled = true
          this.btn.text = '已签'
          this.loadingShow = false
          // 显示
          this.$vux.toast.show({
            text: '成功签到'
          })
        }, response => {
          console.log(response)
          this.loadingShow = false
          // 显示
          this.$vux.toast.show({
            text: '失败',
            type: 'error'
          })
        })
      }
    }
  }
</script>

<style scoped>
  #checkin_bg {
    width: 100%;
    height: 100%;
    background: url("../assets/images/checkin/checkin-bg.jpg");
    background-size: 100% 100%;
    overflow: hidden;
  }

  .go-btn-box {
    width: 80%;
    position: absolute;
    bottom: 10%;
    left: 10%;
  }

  .go-btn {
    width: 80%;
    height: 4rem;
    line-height: 4rem !important;
    font-size: 2rem !important;
    background: #e30000 !important;
    color: #fff !important;
    font-weight: bold;
    letter-spacing: 2rem;
    text-indent: 2rem;
  }
</style>
